import React, { Component } from 'react';
import "../styles/AddressAdd.scss"
import { NavBar, Switch, Toast } from 'antd-mobile';
import {address_update} from "../api/index"

class AddressAdd extends Component {
    state = {
        name: '',
        tel: '',
        province: '',
        city: '',
        county: '',
        addressDetail: '',
        isDefault: false
    }
    handleChange(e) {
        this.setState({ [e.target.name]: e.target.type == 'checkbox' ? e.target.checked : e.target.value })
    }
    change() {
        this.setState({ isDefault: !this.state.isDefault})
    }
    async hold() {
        // console.log(this.props.location.state.item)
        let res = await address_update({
            addressid: this.props.location.state.item.addressid,
            userid: localStorage.getItem('userid'),
            name: this.state.name ? this.state.name : this.props.location.state.item.name,
            tel: this.state.tel ? this.state.tel : this.props.location.state.item.tel,
            province: this.state.province ? this.state.province : this.props.location.state.item.province,
            city: this.state.city ? this.state.city : this.props.location.state.item.city,
            county: this.state.county ? this.state.county : this.props.location.state.item.county,
            addressDetail: this.state.addressDetail ? this.state.addressDetail : this.props.location.state.item.addressDetail,
            isDefault: this.state.isDefault,
        })
        if (res.data.code == '200') {
            Toast.show('编辑地址成功')
            this.props.history.go(-1)
        }
    }
    render() {
        return (
            <div className='addressadd'>
                <NavBar className='header' onBack={() => { this.props.history.go(-1) }}>编辑地址</NavBar>
                <form>
                    <div className="ipt">
                        <span>姓名</span>
                        <input name='name'
                            value={this.state.name ? this.state.name : this.props.location.state.item.name}
                            onChange={(e) => { this.handleChange(e) }} type="text" placeholder='姓名' />
                    </div>
                    <div className="ipt">
                        <span>电话</span>
                        <input name='tel'
                            value={this.state.tel ? this.state.tel : this.props.location.state.item.tel}
                            onChange={(e) => { this.handleChange(e) }} type="text" placeholder='电话' />
                    </div>
                    <div className="ipt">
                        <span>省</span>
                        <input name='province'
                            value={this.state.province ? this.state.province : this.props.location.state.item.province}
                            onChange={(e) => { this.handleChange(e) }} type="text" placeholder='省' />
                    </div>
                    <div className="ipt">
                        <span>市</span>
                        <input name='city'
                            value={this.state.city ? this.state.city : this.props.location.state.item.city}
                            onChange={(e) => { this.handleChange(e) }} type="text" placeholder='市' />
                    </div>
                    <div className="ipt">
                        <span>区</span>
                        <input name='county'
                            value={this.state.county ? this.state.county : this.props.location.state.item.county}
                            onChange={(e) => { this.handleChange(e) }} type="text" placeholder='区' />
                    </div>
                    <div className="ipt">
                        <span>详细地址</span>
                        <input name='addressDetail'
                            value={this.state.addressDetail ? this.state.addressDetail : this.props.location.state.item.addressDetail}
                            onChange={(e) => { this.handleChange(e) }} type="text" placeholder='详细地址' />
                    </div>
                </form>
                <div className="switch">
                    <span>设为默认收货地址</span>
                    <Switch name='isDefault' defaultChecked={this.props.location.state.item.isDefault ? 'true' : 'false'} checked={this.state.isDefault} onChange={() => { this.change() }} />
                </div>
                <div className="btn" onClick={() => { this.hold() }}>保存</div>

            </div>
        );
    }
}

export default AddressAdd;